<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.tab" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <div class="filter-container filter-container-left">
      <el-form class="flex_box_between" :inline="true" label-width='90px'>
        <el-form-item label="用户名：">
          <el-input v-model="queryParam.username" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label="账号：">
          <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable/>
        </el-form-item>
        <el-form-item label="处理人：" v-if="entry==2">
          <el-select v-model="queryParam.task_id" @change='taskIdChange' placeholder="请选择处理人" class="filter-item form-search-input-small">
            <el-option
              v-for="item in users"
              :key="item.uid"
              :label="item.user_info.username"
              :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="flex_box_center search_btns">
        <el-button class="filter-item search" type='primary' icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        <el-button class="filter-item search" icon="el-icon-s-unfold" @click="handleExport">导出</el-button>
      </div>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
      <el-table-column label="用户名" align='center'>
        <template slot-scope="item">
          <span v-if="item.row.user_info">{{item.row.user_info.username || item.row.user_info.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user_info.mobile" label="账号" align='center'/>
      <el-table-column label="提现金额" prop='cash' align='center'/>
      <el-table-column prop="create_time" label="提现申请时间" align='center'/>
      <el-table-column label="提现状态" align='center'>
        <template slot-scope="item">
          {{item.row.status==1?'审核通过':item.row.status==2?'审核拒绝':'审核中'}}
        </template>
      </el-table-column>
      <el-table-column prop="action_log.remake" label="备注" align='center'/>
      <el-table-column label="操作" align='center'>
        <template slot-scope="item">
          <el-button type="primary" v-if="item.row.status==0" size='mini' icon="el-icon-edit" @click="handleExamine(item.row)">提现审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <withdrawalAudit ref='withdrawalAudit' :url='url' @success='getList'></withdrawalAudit>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/excel'
import formOperate from '@/layout/mixin/formOperate'
import withdrawalAudit from '@/views/financial/components/withdrawalAudit.vue'
export default {
  props:{
    entry:{
      type:Number,
      default:1 // 1 我的任务 2 任务派发
    }
  },
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/task/admin/Withdraw',
      activeName: 'second',// tabs默认第几个展开
      tabs:[
        {id:-1,tab:'全部',name:'first'},
        {id:0,tab:'待审核',name:'second'},
        {id:3,tab:'已完成',name:'third'}
      ],
      queryParam: {
        username: '',
        mobile:'',
        start_time:'',
        end_time:'',
        page:1,
        page_size:10,
        status:0,
        is_task:1,
        task_id:'',
        is_task_user:''
      },
      defaultQueryParam:['page','page_size','status','is_task','is_task_user'],
      time:''
    }
  },
  mounted() {
    if(this.entry == 2) {
      this.getTaskUserList(3)
      this.queryParam.is_task_user = ''
    } else {
      this.queryParam.is_task_user = '1'
    }
  },
  methods: {
    // 获取任务处理人
    getTaskUserList(type) {
      let params = {
        type:type
      }
      this.$http.get('/task/admin/getTaskUserList',{params:params}).then(response => {
        if (response.code == 10000) {
          this.users = response.data
        }
      })
    },
    // 处理人改变时
    taskIdChange(){
      this.queryParam.is_task_user = 1
    },
    // 提现审核
    handleExamine(item) {
      this.$refs.withdrawalAudit.show(item)
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'用户名',key:'name'},
        {title:'账号',key:'mobile'},
        {title:'提现金额',key:'cash'},
        {title:'提现申请时间',key:'create_time'},
        {title:'提现状态',key:'status'},
        {title:'备注',key:'remake'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          name:res.user_info.username,
          mobile:res.user_info.mobile,
          cash:res.cash,
          create_time:res.create_time,
          status:res.status==1?'审核通过':res.status==2?'审核拒绝':'审核中',
          remake:res.action_log.remake
        })
      })
      export2Excel(columns,list,'提现数据')
    },
  },
  components:{
    withdrawalAudit
  }
}
</script>
